Page({
  data: {
    pen: 3,
    color: '#cc0033', 
    showImage:true,
  },
  startX: 0, 
  startY: 0, 
  isClear: false, 
  context: null, 

  onLoad: function () {
    
    this.context = wx.createCanvasContext('myCanvas');
      
  },


 
  touchStart: function (e) {
    
    this.startX = e.changedTouches[0].x;
    this.startY = e.changedTouches[0].y;

    if (this.isClear) { 
      this.context.setStrokeStyle('#F8F8F8');
      this.context.setLineCap('round'); 
      this.context.setLineJoin('round'); 
      this.context.setLineWidth(20); 
      this.context.save(); 
      this.context.beginPath(); 
      this.context.arc(this.startX, this.startY, 5, 0, 2 * Math.PI, true); 
      this.context.fill(); 
      this.context.restore(); 
    } else {
      this.context.setStrokeStyle(this.data.color);
      this.context.setLineWidth(this.data.pen);
      this.context.setLineCap('round'); 
      this.context.beginPath();
    }
  },

  
  touchMove: function (e) {
    var startX1 = e.changedTouches[0].x;
    var startY1 = e.changedTouches[0].y;

    if (this.isClear) {
      this.context.save();
      this.context.moveTo(this.startX, this.startY); 
      this.context.lineTo(startX1, startY1); 
      this.context.stroke();
      this.context.restore();
      this.startX = startX1;
      this.startY = startY1;
    } else {
      this.context.moveTo(this.startX, this.startY);
      this.context.lineTo(startX1, startY1);
      this.context.stroke();
      this.startX = startX1;
      this.startY = startY1;
    }

    
    this.context.draw(true); 
  },

  
  clearCanvas: function () {
    this.isClear = !this.isClear;
  },

  penSelect: function (e) { 
    this.setData({ pen: parseInt(e.currentTarget.dataset.param) });
    this.isClear = false;
  },

  colorSelect: function (e) { 
    this.setData({ color: e.currentTarget.dataset.param });
    this.isClear = false;
  },

  baocun: function () {
    const that = this;
  
    
    wx.getImageInfo({
      src: 'https://7072-project-7gj8ok755ee9d729-1333095443.tcb.qcloud.la/images/3.jpg?sign=5be50df979ef4c322925b44e2696b462&t=1734858970',
      success(res) {
  
        
        that.context.drawImage(res.path, 160, 275, 180, 180); 

  
        
        that.context.setStrokeStyle(that.data.color);
        that.context.setLineWidth(that.data.pen);
        that.context.setLineCap('round'); 
  
        
        that.context.draw(true, () => {
          
          wx.canvasToTempFilePath({
            canvasId: 'myCanvas',
            quality: 1,
            success(res) {
              const tempFilePath = res.tempFilePath; 
              console.log('临时图片路径:', tempFilePath);
  
              
              wx.saveImageToPhotosAlbum({
                filePath: tempFilePath,
                success(res) {
                  console.log('图片保存成功', res);
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success'
                  });
                },
                fail(err) {
                  console.error('保存失败', err);
                  wx.showToast({
                    title: '保存失败',
                    icon: 'none'
                  });
                }
              });
            },
            fail(err) {
              console.error('转换失败', err);
              wx.showToast({
                title: '转换失败',
                icon: 'none'
              });
            }
          });
        });
      }
    });
  
    this.setData({
      showImage: false
    });
  },
  

});
